<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>往期直播</title>
        <!-- Styles -->
        <style>
            .title{
                display:flex;
                justify-content:center;
                align-items: center;
                border-bottom: 1px #ddd solid;
                margin-bottom: 10px;
            }
            .list{
                display: flex; 
                flex-direction: column;
            }
            .list>a{
                width: 100%;
            }
            .list>a:not(:first-child){
                border-top: 1px solid #ddd;
            }
            .item{
                display: flex; 
                width: 100%;
                margin:10px;
            }
            
            .img{
                flex:1;
            }
            .img>img{
                width: 80px;
                height: 80px;
                border-radius: 8px;
            }
            .item-title{
                flex:3;
                padding: 8px;
                display:flex;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="title">
            <h2>乒乓江湖往期直播</h2>
        </div>
        <div class="list">
            @foreach($list as $item)
            <a href="{{$item->url}}">
                <div class="item">
                    <div class="img">
                        <img src="http://qiniu.file.pingpangjianghu.com/{{$item->icon}}" alt="">
                    </div>
                    <div class="item-title">
                        <span>{{$item->title}}</span>
                    </div>
                </div>
            </a>
            @endforeach
            
        </div>
    </body>
</html>
